<template>
  <div>
    <!-- 选择未指派菜单司机 2018/3/7 11:44 zhangQ -->
    <Form ref="dispatchForm" :model="dispatchForm" :rules="roleDispatchForm" :label-width="80">
      <FormItem label="选择司机" prop="driverIds">
        <!--<autoSelect v-model="dispatchForm.driverIds" field="id" label="login_name" search-keys="login_namePy,login_name" :dataList="driverList" :dropAll="true" :multiple="true"></autoSelect>-->
        <!--<Select v-model="dispatchForm.driverIds" multiple >-->
        <!--<template v-for="item in driverList">-->
        <!--<Option :value="item.id" :key="item.id">{{ item.login_name }}</Option>-->
        <!--</template>-->
        <!--</Select>-->
        <Transfer :data="driverListTransfer"
                  :target-keys="dispatchForm.driverIds"
                  :render-format="renderFormat"
                  :list-style="{width:'200px',height: '350px'}"
                  filterable
                  @on-change="checkDriverHandleChange"
                  :filter-method="driverListFilter">
          <div :style="{float: 'right', margin: '5px'}">
            <Button type="ghost" size="small" @click="resetData">重置</Button>
          </div>
        </Transfer>
      </FormItem>
      <FormItem label="选择地址" prop="address" v-if="isEdit">
        <autoSelect v-model="dispatchForm.address" field="key" label="key" search-keys="key,keyPy" :dataList="addressList" :dropAll="true" style="width: 200px;"></autoSelect>
      </FormItem>
      <FormItem label="联系人" prop="contacts" v-if="isEdit">
        <Input v-model="dispatchForm.contacts" style="width: 200px;"></Input>
      </FormItem>
      <FormItem label="电话" prop="mobile" v-if="isEdit">
        <Input v-model="dispatchForm.mobile" style="width: 200px;"></Input>
      </FormItem>
      <div class="xlinkModal-footer">
        <Button type="primary" @click="onOk">确认</Button>
      </div>
    </Form>
  </div>
</template>

<script>
  import _ from 'lodash'

  export default {
    name: 'check-driver-modal',
    data () {
      let dispatchForm = { driverIds: [], address: '', mobile: '', contacts: '' }
      let roleDispatchForm = {
        mobile: [{ required: true, message: '电话不能为空', trigger: 'blur' }],
        contacts: [{ required: true, message: '联系人不能为空', trigger: 'blur' }]
      }
      let driverListTransfer = []
      let isEdit = true
      let datas = { dispatchForm, roleDispatchForm, isEdit, driverListTransfer }
      return datas
    },
    props: {
      form: {
        type: Object,
        default () {
          return {}
        }
      },
      driverList: {
        type: Array,
        default () {
          return []
        }
      },
      addressList: {
        type: Array,
        default () {
          return []
        }
      }
    },
    computed: {},
    methods: {
      renderFormat (item) {
        return item.label + ' - ' + item.description
      },
      resetData () {
        if (!this.form.driverIds) {
          this.form.driverIds = '[]'
        }
        this.dispatchForm.driverIds = JSON.parse(this.form.driverIds)
      },
      checkDriverHandleChange (newTargetKeys, direction, moveKeys) {
        this.dispatchForm.driverIds = newTargetKeys
      },
      driverListFilter (data, txt) {
        let upTxt = txt.toUpperCase()
        let lowTxt = txt.toLowerCase()
        return (_.includes(data.row['login_name'], upTxt) || _.includes(data.row['login_name'], lowTxt)) || (_.includes(data.row['truck_no'], upTxt) || _.includes(data.row['truck_no'], lowTxt)) || (_.includes(data.row['login_namePy'], upTxt) || _.includes(data.row['login_namePy'], lowTxt))
      },
      onOk () {
        if (!(this.dispatchForm.driverIds.length > 0)) {
          this.$Message.error('司机必选')
          return
        }
        if (!this.dispatchForm.address) {
          this.$Message.error('地址不能为空')
          return
        }
        this.$refs['dispatchForm'].validate((valid) => {
          if (valid) {
            this.$emit('dispatch', this.dispatchForm)
          } else {
          }
        })
      }
    },
    created () {
    },
    mounted () {
      let driverListTransfer = []
      this.driverList.forEach((item) => {
        driverListTransfer.push({
          key: item.id,
          label: item.login_name,
          description: item.truck_no,
          row: item
        })
      })
      this.driverListTransfer = driverListTransfer
      setTimeout(() => {
        if (this.form.address) {
          this.isEdit = false
          this.dispatchForm.driverIds = JSON.parse(this.form.driverIds)
          this.dispatchForm.address = this.form.address
          this.dispatchForm.contacts = this.form.contacts
          this.dispatchForm.mobile = this.form.mobile
        }
      }, 200)
    },
    components: {}
  }
</script>

<style scoped>

</style>
